// 配置导航守卫
// 需求，项目为一个后阳台管理系统，所有的页面都要登录后才能登录（除了404
// 有token就登录没有就不给登录
// 即
//       // 变成从vuex中获取保存起来的路由数据
// return this.$store.state.permission.router

import router from './router/index'
import store from './store/index'

// 导航守卫==全局前置首位用的最多，页面跳转之前触发的一个函数

router.beforeEach(async(to, from, next) => {
  // console.log('from: ', from)
  // console.log('to: ', to)
  // console.log(store.state.user.token)
  const arr = ['/login', '/404']
  if (store.state.user.token) {
    if (to.path === '/login') {
      next('/')
    } else {
      // 在导航守卫中调用action函数,从而获取用户信息
      // 当用户信息不存在的时候才重新获取
      if (!store.state.user.userInfo.userId) {
        await store.dispatch('user/getUserInfo')
        // 为了保证拿到menus
        // 放置具有筛选访问权限的炉头
        // 调用action里面的函数dispatch('permission/filterRouter,参数）
        // 因为在模块里面的异步那里return了，所以这里可以直接用，
        // 如果不在actions，就拿不到了，就要用￥store.state.permission....
        const newRouter = await store.dispatch('permission/filterRouter', store.state.user.userInfo.roles.menus)
        console.log('29行newRouter: ', newRouter)
        // 把筛选出来的有权限的路由加到路由规则中用addrouter,则可以恢复路由访问的功能了
        router.addRoutes([...newRouter, { path: '*', redirect: '/404', hidden: true }])
        // 访问权限的时候刷新浏览器，会调到404
        // 原因：因为刷新浏览器所有的数据包括store里面的数据都会重置，除了token，因为他坐了数据持久化
        // 也就是说动态路由不在了，不在的时候自然会跳转到404
        // 解决方法：
        // 1.干掉静态路由的404页面干掉即可，但是我们这个项目还要404，我们和添加动态路由一起加进去
        // 解决问题一之后出现问题二：访问页面刷新路由会出现一片空白
        // 办法：此时动态路由后添加之后有有了，所以可以利用next重新跳回原来访问的对象
        next(to.path)// 调用了这行代码后，就不会往下执行了，然后会重新执行了导航守卫
        // 相当于重定向了，然后又从上往下走，执行第二次，那么这一次，to就有值了
      }
      next()
    }
  } else if (arr.includes(to.path)) {
    next()
  } else {
    next('login')
  }
//   else if (to.path === '/login' || to.path === '/login') {
//     next()
//   } else {
//     next('/login')
//   }
})
// to:跳转的目标路由对象
// from：当前的路透对象(跳转之前)
// next：放行函数
// next必须调用
